(function () {
  let myChart = echarts.init(document.querySelector('.users .bar'))
  let item = {
    value: 1200, // 值
    tooltip: { extraCssText: 'opacity:0' }, // 额外附加到浮层的 css 样式
    itemStyle: { // 图形样式。
      color: '#254065' // 柱条的颜色。 
    },
    emphasis: { //  鼠标移动上去hover的样式
      itemStyle: { // 图形样式。
        color: '#254065' // 柱条的颜色。 
      },
    }
  };
  let option = {
    tooltip: {}, // 提示框组件
    xAxis: {
      type: 'category',
      axisTick: {
        show: false,
        // lineStyle:{
        //     color:'red'
        // }
      },
      axisLine: {
        lineStyle: {
          color: "rgba(0, 240, 255, 0.3)"
        }
      },
      axisLabel: {
        color: '#4c9bfd'  //刻度文字颜色
      },
      data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆']
    },
    grid: {  // 直角坐标系网格
      show: true,
      containLabel: true, // grid 区域是否包含坐标轴的刻度标签
      borderColor: 'rgba(0, 240, 255, 0.3)', // 外边框颜色
      left: '3%', // grid 组件离容器左侧的距离
      right: '4%',
      bottom: '3%',
      top: '4%',
    },
    yAxis: {
      type: 'value',
      axisLabel: {  // 刻度文字颜色
        color: '#4c9bfd'
      },
      // 坐标轴刻度相关设置。
      axisTick: {
        show: false // 不显示坐标轴刻度
      },
      splitLine: {  //  轴线相关设置  
        lineStyle: {
          color: 'rgba(0, 240, 255, 0.3)' // 坐标轴线(分割线)的颜色 
        }
      }
    },
    series: [{
      data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],
      type: 'bar',
      barWidth: '60%',
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0, 0, 0, 1,       //4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位. 而0 0 0 1则代表渐变色从正上方开始
            [
              { offset: 0, color: '#00fffb' }, // 0 起始颜色
              { offset: 1, color: '#0061ce' } // 1 结束颜色
            ]              //数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
          )
        }
      }
    }]
  };
  myChart.setOption(option)
  window.addEventListener('resize',function () {
    myChart.resize()
  })
})()